<template>
  <div>
    <div class="upload_file">
      <el-dropdown>
        <el-button type="primary">
          上传<i class="el-icon-upload el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-upload
              class="upload-demo"
              action="http://localhost:8301/file/uploadFile"
              multiple
              :show-file-list="false"
              :data="dataPath"
              :on-progress="onUp"
              :before-upload="beforeUp"
              :on-success="upSuccess"
              :on-error="upError">
            <el-button type="text">上传文件</el-button>
          </el-upload>
          <el-upload
              class="upload-demo"
              action="http://localhost:8301/file/uploadFiles"
              multiple
              :data="dataPath"
              :show-file-list="false"
              webkitdirectory
              :on-progress="onUp"
              :before-upload="beforeUp"
              :on-success="upSuccess"
              :on-error="upError">
            <el-button type="text">上传文件夹</el-button>
          </el-upload>
        </el-dropdown-menu>
      </el-dropdown>

    </div>

    <div class="file_list">
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="date"
            label="日期"
            width="180">
        </el-table-column>
      </el-table>
    </div>
  </div>

</template>

<script>
export default {
name: "UploadFile",
  data(){
    return{
      dataPath: {
        path: ''
      },

    }
  },

  created() {
    this.$nextTick(() => {
      document.getElementsByClassName("el-upload__input")[1].webkitdirectory = true
    })

    this.getFiles()
  },

  methods: {
    beforeUp(file){
      this.dataPath.path = file.webkitRelativePath
    },
    onUp(even,file,fileList){
    },

    upSuccess(res, file, fileList){
      this.$notify.success(res)
    },

    upError(err, file, fileList){
      this.$notify.error(err)
    },

    getFiles(){
      
    }
  }
}
</script>

<style scoped>
.uploader-example {
  width: 880px;
  padding: 15px;
  margin: 40px auto 0;
  font-size: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .4);
}
.uploader-example .uploader-btn {
  margin-right: 4px;
}
.uploader-example .uploader-list {
  max-height: 440px;
  overflow: auto;
  overflow-x: hidden;
}

.upload_file{
  float: left;
  margin: 3%;
}

.file_list{
  width: 100%;
  height: 30rem;
  float: left;
  /*background: rgba(0,0,0,0.5);*/
}
</style>